<template>
  <div class="action itmes-list" v-if="list.length !== 0">
     <div class="item-list" v-for="(item, i) in list" :key="i">
      <div class="item-left">
        <img :src="'http://localhost:3002/' + item.cover" class="imgse" />
      </div>

      <div class="item-right">
        <h2 class="title">
          <a :href="'/details/' + item._id">
            <span class="">{{ item.refRadio == 'life' ? '生活' : item.refRadio }}</span> {{ item.title }}
          </a>
        </h2>

        <p class="text">
          {{ item.blogtext }}
        </p>

        <section class="section-bottom">
          <section class="icons">
            <i class="el-icon-time"></i>{{ datatfilter(item.datatime) }}
          </section>
          <span class="right-href">
            <a :href="'/details/' + item._id">阅读全文 >></a>
          </span>
        </section>
      </div>
    </div> 
      <el-pagination
        class="pageacion"
        @current-change="sizeChanges"
        :current-page="currentPage"
        background
        :page-size="5"
        :total="totol"
        layout="prev, pager, next"
        @prev-click="prevClicks"
        @next-click="nextClicks"
      >
      </el-pagination>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props:['list','totol','currentPage'],
   methods: {
    sizeChanges(page) {
      if(window.location.pathname == '/'){
        window.location = `/?page=${page}`;
      } else {
        let pat = window.location.pathname.split('/')[1]
        window.location = `/${pat}/${page}`
      }
    },
    prevClicks(val) {
      this.currentPage = val;
    },
    nextClicks(val) {
      this.currentPage = val;
    },
    async actionList(page) {
      let { data } = await this.$axios({
        url: `http://localhost:3002/actionList?page=${page}`,
      });

      (this.list = data.data), (this.totol = data.totol);
    },
  },
  created(){
  },
  computed:{
    datatfilter(){
      return (data)=>{
        return moment(data).format('YYYY-MM-DD h:mm:ss')
      }
    }
  }
};
</script>

<style  scoped lang="less">

.itmes-list {
  margin-bottom: 20px;
  padding: 0px 20px;
  padding-bottom: 20px;

.item-list {
    padding: 23px 0px;
    display: flex;
    border-bottom: 1px solid #eeecec;


    .item-left {
      height: 150px;
      flex: 3;
      overflow: hidden;
      position: relative;
      .imgse {
        width: 100%;
        // min-height: 90%;
        max-height: 150px;
        border-radius: 3px;
        // position: relative;
        // height: 100%;
      }
      .imgse:hover {
        transition: all 1s;
        transform: scale(1.3);
        opacity: 0.7;
      }

    }
    .item-right {
      flex: 7;
      margin-left: 15px;

      .title {
        margin: 0px;
        font-size: 18px;
        font-weight: 360;
        letter-spacing: 1px;

        a {
          color: rgb(82, 80, 80);
          text-decoration: none;
          span {
            // padding: 2px;
            letter-spacing: 0.3px;
            padding: 3px 6px;
            border-radius: 3px;

            font-size: 12px;
            background-color: #06aaff;
            // color: #06aaff;
            color: white;
          }
        }
      }

      .text {
        display: flex;
        align-content: center;
        font-size: 13px;
        color: #aaaaaa;
        margin: 20px 0px;
        letter-spacing: 0.5px;
        font-weight: 300;
        height: 53px;

        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      .section-bottom {
        display: flex;
        justify-content: space-between;

        .icons {
          display: flex;
          font-size: 11px;
          align-items: center;
          color: #cccccc;

          i {
            margin: 0px 5px;
            font-size: 14px;
          }
        }

        .right-href {
          // background-color: #cccccc;
          background-color: #ebebeb;
          a {
            color: #06aaff;
            font-size: 14px;
            text-decoration: none;
          }
        }
      }
    }
  }
 .pageacion {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

}

.action {
  background-color: white;
}
</style>